<template>
<view class="main-container">
	<view class="form-group2">
		<view class="form-label">手机号码<view class="require">*</view></view>
		<view class="form-control"><input v-model="customer.phone" maxlength="11" @blur="onBlurPhone" placeholder="输入手机号码"/></view>
	</view>
	<view class="form-group2">
		<view class="form-label">客户姓名<view class="require">*</view></view>
		<view class="form-control"><input v-model="customer.name" placeholder="输入姓名"/></view>
	</view>
	<view class="form-group2">
		<view class="form-label">性别</view>
		<view class="form-control">
			<radio-group @change="sexRadioChange">
				<label class="single-label" v-for="(item, index) in sexList" :key="item.value">
					<radio :value="item.value" :checked="item.value === customer.sex" /> {{item.name}}
				</label>
			</radio-group>
		</view>
	</view>
	<view class="form-group2">
		<view class="form-label">客户生日</view>
		<view class="form-control">
			<picker mode="date" v-model="customer.birthday" :start="startDay" :end="endDay" @change="bindDateChange">
				<view class="uni-input" v-if="customer.birthday">{{customer.birthday}}</view>
				<view class="uni-input" style="color:#888;" v-if="!customer.birthday">请选择日期{{customer.birthday}}</view>
			</picker>
		</view>
	</view>
	<view class="form-group2">
		<view class="form-label">地址</view>
		<view class="form-control"><input v-model="customer.address" placeholder="客户家庭地址,选填"/></view>
	</view>
	<view class="form-group2">
		<view class="form-label">备注</view>
		<view class="form-control"><input v-model="customer.remark" placeholder="备注信息,选填"/></view>
	</view>
	<view class="form-group2">
		<view class="form-label">建卡类型</view>
		<view class="form-control">
			<view class="card-type-list">
				<view v-if="timesCardList.length>0" :class="'card-type '+(cardType==='times'?'current':'')" @click="onChangeCardType('times')">次数卡</view>
				<view v-if="percentCardList.length>0" :class="'card-type '+(cardType==='percent'?'current':'')" @click="onChangeCardType('percent')">折扣卡</view>
				<view v-if="surplusCardList.length>0" :class="'card-type '+(cardType==='surplus'?'current':'')" @click="onChangeCardType('surplus')">储值卡</view>
				<view :class="'card-type '+(cardType===''?'current':'')" @click="onChangeCardType('')">无</view>
			</view>
		</view>
	</view>
	<view class="form-group2" v-if="cardType!==''">
		<view v-if="cardType === 'times'" class="card-main">
			<view :class="'single-card-view '+(cardId===card.id?'current':'')" v-for="card in timesCardList" @click="cardId = card.id" :key="card.id">
				<view class="title">{{card.name}}</view>
				<view class="field-show"><view class="label">次数：</view><view class="value">{{card.times}}</view></view>
				<view class="field-show"><view class="label">有效天数：</view><view class="value">{{card.validDays<=0?'永久':(card.validDays+'天')}}</view></view>
				<view class="field-show" v-if="card.validDays>0"><view class="label">有效期止：</view><view class="value">{{$common.buildValidEndDay(card.validDays)}}</view></view>
				<view class="field-show"><view class="label">售价：</view><view class="value">{{(card.price).toFixed(2)}} 元</view></view>
				<view class="field-show" v-if="card.remark"><view class="label">备注：</view><view class="value">{{card.remark}}</view></view>
			</view>
		</view>
		<view v-if="cardType === 'percent'" class="card-main">
			<view :class="'single-card-view '+(cardId===card.id?'current':'')" v-for="card in percentCardList" @click="cardId = card.id" :key="card.id">
				<view class="title">{{card.name}}</view>
				<view class="field-show"><view class="label">折扣：</view><view class="value">{{(card.discountPercent/10).toFixed(1)}} 折</view></view>
				<view class="field-show"><view class="label">有效天数：</view><view class="value">{{card.validDays<=0?'永久':(card.validDays+'天')}}</view></view>
				<view class="field-show" v-if="card.validDays>0"><view class="label">有效期止：</view><view class="value">{{$common.buildValidEndDay(card.validDays)}}</view></view>
				<view class="field-show"><view class="label">售价：</view><view class="value">{{(card.price).toFixed(2)}} 元</view></view>
				<view class="field-show" v-if="card.remark"><view class="label">备注：</view><view class="value">{{card.remark}}</view></view>
			</view>
		</view>
		<view v-if="cardType === 'surplus'" class="card-main">
			<view :class="'single-card-view '+(cardId===card.id?'current':'')" v-for="card in surplusCardList" @click="cardId = card.id" :key="card.id">
				<view class="title">{{card.name}}</view>
				<view class="field-show"><view class="label">充值：</view><view class="value">{{(card.chargeMoney).toFixed(2)}} 元</view></view>
				<view class="field-show"><view class="label">到账：</view><view class="value">{{(card.plusMoney).toFixed(2)}} 元</view></view>
				<view class="field-show"><view class="label">折扣：</view><view class="value">{{card.needPercent==='1'?((card.discountPercent/10).toFixed(1)+' 折'):'不再折扣'}}</view></view>
				<view class="field-show"><view class="label">有效天数：</view><view class="value">{{card.validDays<=0?'永久':(card.validDays+'天')}}</view></view>
				<view class="field-show" v-if="card.validDays>0"><view class="label">有效期止：</view><view class="value">{{$common.buildValidEndDay(card.validDays)}}</view></view>
				<view class="field-show" v-if="card.remark"><view class="label">备注：</view><view class="value">{{card.remark}}</view></view>
			</view>
		</view>
	</view>
	<view class="opt-view">
		<view class="add-opt" @click="onSaveCustomer()">确定保存</view>
	</view>
	
	<auto-modal :show="needWorker" title="为确保数据安全,请先完善个人信息" :cancel="false" @onOpt="onSaveWorker">
		<view class="form-group">
			<view class="form-label">姓名</view>
			<input class="form-control" v-model="worker.name" maxlength="10" placeholder="请输入真实姓名"/>
		</view>
		<view class="form-group">
			<view class="form-label">电话</view>
			<input class="form-control" v-model="worker.phone" maxlength="11" type="number" placeholder="请输入手机号码"/>
		</view>
	</auto-modal>
</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			customer: {
				birthday: '',
				sex: ""
			},
			startDay: '',
			endDay: '',
			cardType: '',
			cardId: 0, //当前选中的卡ID
			percentCardList: [],
			surplusCardList: [],
			timesCardList: [],
			sexList: [{name: "男", value: "1"}, {name: "女", value: "2"}, {name:"未知", value: ""}],
			worker: {},
			needWorker: false,
			hasSubmit: false,
			customerId: 0,
		}
	},
	onLoad(options) {
		that = this;
		that.customerId = options.id;
		that.loadData();
		
		setTimeout(function() {
			that.startDay = that.getDate("start");
			that.endDay = that.getDate("end");
		}, 1000)
	},
	methods: {
		loadData: function() {
			that.$request.get("/customer/onAddCustomer", {customerId: that.customerId}).then((res) => {
				// console.log("---------->>>", res)
				that.percentCardList = res.percentCardList;
				that.surplusCardList = res.surplusCardList;
				that.timesCardList = res.timesCardList;
				if(!res.worker || res.worker.id<=0) {
					that.needWorker = true;
				} else {
					that.worker = res.worker;
				}
				if(res.customer && res.customer.id>0) {
					that.customer = res.customer;
				}
			})
		},
		onBlurPhone: function() {
			let phone = this.customer.phone.trim();
			if(phone) {phone = phone.trim()}
			this.customer.phone = phone;
			if(phone.length===11) {
				this.$request.get("/customer/queryByPhone", {phone: phone}).then((res) => {
					// console.log("==========", res)
					if(res.customer) {
						that.customer = res.customer;
					}
				})
			} else {
				uni.showModal({
					title: "操作提醒", content: "请认真输入手机号码"
				})
			}
		},
		bindDateChange: function(e) {
			this.customer.birthday = e.detail.value;
		},
		onChangeCardType: function(type) {
			this.cardType = type;
			this.cardId = 0;
		},
		onSaveCustomer: function() {
			let data = that.customer;
			if(!data.phone || data.phone.length!=11) {
				this.$common.showNormalToast("手机号码长度应为11")
			} else if(!data.name || data.name.length<2) {
				this.$common.showNormalToast("姓名长度不能低于2")
			} else if(this.cardType!=='' && this.cardId===0) {
				this.$common.showNormalToast("选择建卡后，必须选择具体卡券");
			} else {
				data.cardType = this.cardType;
				data.cardId = this.cardId;
				console.log(data)
				that.$request.get("/customer/saveCustomer", data, {method: "post"}).then((res) => {
					if(res.code==0) {
						that.customer = {birthday: "", sex: ""};
						that.cardId = 0;
						that.cardType = "";
						this.$common.showNormalToast("保存成功");
						uni.navigateTo({
							url: "/pages/customer/list"
						})
					} else {
						this.$common.showNormalToast(res.msg);
					}
				})
			}
		},
		onSaveWorker: function() {
			if(that.hasSubmit) {
				this.$common.showNormalToast("数据提交中...")
				return false;
			}
			let data = that.worker;
			if(!data.name || data.name.length<2) {
				this.$common.showNormalToast("姓名长度不能低于2")
			} else if(!data.phone || data.phone.length!=11) {
				this.$common.showNormalToast("请认真输入手机号码")
			} else {
				data.shopId = that.shopId;
				that.hasSubmit = true;
				this.$request.get("/worker/saveWorker", data, {method: "post"}).then((res) => {
					if(res.code==0) {
						that.hasSubmit = true;
						that.worker = res.data;
						that.needWorker = false;
					} else {
						that.hasSubmit = false;
					}
				})
			}
		},
		sexRadioChange: function(val) {
			// console.log("==========", val)
			that.customer.sex = val.detail.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 80;
			} else if (type === 'end') {
				year = year ;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
		
	}
}
</script>

<style lang="scss">
.main-container {
	padding-top: 40rpx; padding-bottom: 150rpx;
}

.card-type-list {
	display: inline;
	
	.card-type {
		display: inline; padding: 6rpx 20rpx; border:1px #ddd solid; border-width: 1px 0 1px 1px; font-size: 24rpx; background:#f4f4f4;
	}
	.card-type:last-child {
		border-right: 1px #ddd solid;
	}
	.card-type.current {
		background:#ef7a01; color:#FFF;
	}
}

.card-main {
	width: 100%;
}
.single-card-view {
	border:1px red solid; width: calc(100% - 80rpx);
	background:#fdfdfd; border:1px #ddd solid; border-radius: 10rpx;
	box-shadow: 0px 0px 3px 3px #e0e0e0; margin-top: 24rpx;
	padding: 20rpx; margin: 20rpx;
	
	.title {
		border-bottom: 1px #ddd solid; padding-bottom: 20rpx; margin-bottom: 20rpx;
	}
	.field-show {
		display: inline-flex; width: 100%; padding: 10rpx 0px;
		
		.label {
			width: 180rpx; text-align: right; font-size: 28rpx; color:#333; padding-right: 10rpx;
		}
		.value {
			font-size: 30rpx; color:#111; padding-right: 10rpx;
		}
	}
}
.single-card-view.current {
	border:1px #ef7a01 solid; box-shadow: 0px 0px 3px 3px #e09807; background:#fffbf6;
}

.opt-view {
	position: fixed; bottom: 20rpx; width: calc(100vw - 4%); padding: 20rpx 2%; margin-left: -2%; border-top: 1px #ddd solid; background:#f6f6f6;
	bottom: 0px; padding-bottom: 40rpx;
	
	.add-opt {
		letter-spacing: 12rpx; width: 80%; margin-left: 10%; padding: 20rpx 0px; text-align: center; border-radius: 20rpx; background:#ef7a01; color:#FFF;
	}
}
.single-label {
	margin-left: 24rpx; color:#666; font-size: 30rpx;
}
</style>
